<!-- 右菜单栏 -->
<template>
  <div class="menu-box">
    <ul>
      <li>
        <a-select ref="select" :value="selectSch" style="width: 126px" @change="handleChange">
          <a-select-option v-for="sch in campus" :key="sch.value" :value="sch.value">
            {{ sch.name }}
          </a-select-option>
        </a-select>
      </li>
      <div class="ivu-divider-default" style=""></div>
      <li>
        <tags-outlined class="lable-sty" />
        <span>大楼标签</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import { TagsOutlined } from '@ant-design/icons-vue'
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'

export default {
  components: {
    TagsOutlined
  },
  emits:['changeCampus'],
  setup(props, { emit }) {
    const state = reactive({
      selectSch: 'sqsfxq',
      campus: []
    })
    const { proxy } = getCurrentInstance()
    const map = proxy.$root.$map
    const config = proxy.$root.$mapconfig

    onMounted(() => {
      // console.log('config', config);
      // 处理校区下拉框数据
      state.campus = config.campus
    })

    function handleChange(value) {
      state.selectSch = value
      // 切换地图校区显示图层
      emit('changeCampus', value)
    }

    return {
      ...toRefs(state),
      handleChange
    }
  }
}
</script>

<style lang='scss' scoped>
.menu-box {
  position: fixed;
  top: 100px;
  right: 25px;
  line-height: 42px;
  transition: top 0.3s;
  z-index: 4;
  background: rgba(255, 255, 255, 0.84);
  ul {
    border-radius: 3px;
    padding: 0px 18px 0 8px;
    -webkit-box-shadow: 0 0 13px #cbc9c9;
    box-shadow: 0 0 13px #cbc9c9;
    float: right;
    margin-bottom: 0;
    li {
      display: inline-block;
      cursor: pointer;
      .lable-sty {
        margin: 0px 7px 0 10px;
        vertical-align: middle;
      }
    }
    .ivu-divider-default {
      margin: 10px 8px 0 8px;
      display: inline-block;
      height: 16px;
      width: 1px;
      background: rgba(0, 0, 0, 0.25);
      vertical-align: sub;
    }
  }
}
</style>
